I made this website from scratch using HTML, CSS, JSON & JavaScript. The front page animation was created in Adobe AfterEffects, converted to JSON, and uses Lottie Bodymovin and JavaScript to come alive, dropping in on every index page load. It is a nod to my fervent passion in packaging and an allusion to revealing my inner workings. Have you noticed what happens when you hover over (or press on mobile) my selfie? It’ll make you smile, well at least I will be ;)

I started making this during my final semester in university, the desire to apply my learnings and share the breadth of my creative works in a format that is potential-employer friendly (contact me here ;) and representative of my personality. At the time I was reaching my 3rd year of neon green hair, asking for the choice of accent colour. As I am writing this, I haven't touched bleach in well over a year, I have a fabulous natural blonde mullet with only a bit of bleached hair in the braids I haven't trimmed since my initial mullet cut.

Initially I had two colour schemes, a switch made easy by changing the linked CSS file, intending for the second to use a similar palette while being more accessible to read. You can check out my original index page here if you're curious to see where we started from. I stopped working on this website the moment my last employer sent me their second offer. This version doesn't just have more themes, each with a corresponding special front page smile and meets contrast standards for accessibility. This whole site will eventually meet other standards for accessibility - such as alt texts on every image, captions & transcripts for videos, tab-able buttons and even additional languages. I learned a few of those before trying coding languages.

Having a perfect website isn't my priority, not even a fast loading one. I know im not going to have that much traffic and I hope visitors are patient enough for all my flash to load. Besides, I think the flicker of unformatted pages adds character when you change from the default the colour theme. Also if you scroll too fast on my project pages, it's going to get messy. These characteristics come from the raw nature of its development, using minimal tools to focus on learning about the core of website development. In recent months however I started using a tool which changed my game, ChatGBT.

While AI is no perfect tool, it was massively useful in configuring new features and patching other problems, mostly since I got near-immediate responses on questions specific to my code. Since I lack a formal extended education on programming, and when in passion I prefer to learn by exploring over lectures. ChatGBT has been extremely helpful and I’ve learned plenty on how to best inquire such intelligence.

My goal while building this was to pique your curiosity with interactive elements designed to draw your attention. The cube in the bottom left spins as you scroll and if you click on it you have the option to toggle colour themes. Short descriptions appear under your mouse when you hover on images on my About Me and My Experience pages, and often hovering on text will highlight its associated media. On most pages when you click on the images, a slideshow of that selection will pop up. When you resize your window after opening the production dieline easter egg on the index page, the measurements will change accordingly. To extend beyond, there are hyperlinks to other places within my website and out wider in the web. I also welcome you to use my easy email template on my contact page to share this page with others, or download a resume which will soon match the colour theme you are currently viewing the site in.

All throughout there are so many details in this quilt, and not all of them were as fun to make. I wish it was as brief as this sentence about how much trouble the scroll behaviors on my project pages caused me, but we persevere and the end result is pretty cool. I enjoyed referring back to Version 1 as I worked on the update, just to see how much I was growing.

I'll grow until the crows come home. There are so many other features I look forward to adding, but in my excitement for sharing this with you, they'll have to wait for Version 3.


The 'i make things' animation, which begins after the cube unfolds on my homepage, is actually my handwriting to deepen the personal touch On the 'My Projects' page, I added feature images within the buttons that take you to the page for that category. On button hover, the images become less apparent to add focus to the title which already has a shadow effect to help with legibility
If you click on the cube in the bottom left corner, all the theme options roll out the side. You may have noticed that when you scroll on longer pages, the cube spins within its button. If you double-click the cube it will toggle to a random colour theme. As you travel through my pages your theme selection will be remembered (on desktop), but doing this does cause a flicker of the page loaded with no CSS which I haven't yet been able to patch out A fun easter egg I added is within the back button, where if going back would mean leaving my domain it will ask if you are sure about leaving for two clicks before accepting your choice and taking you away - but to a common Czech page which at least I find funny. Another fun easter egg is a sound which plays if your window is too small, try it out! On my 'Connect' page I created three buttons. The first opens a pre-written email which makes it easy to share my website with your professional peers, and the second two are for downloading my resume. I have intentions of making more copies of my resume, so that whatever you download will match the color theme you are currently viewing my site in. The resume download options are also available on my resume page.
My Experience page, which is a glorified resume, contains the most interactivity between elements on any of my pages. For Summary of Qualifications you can switch tabs to see what is most relevant to your opportunity. <br> <br> In the body of my resume a tool-tip will appear under your cursor encouraging you to check the hyperlink, or on images it'll give you some more info. The images are tied with sections of text so that when you hover over either the text or image section, both become highlighted with colour and shadow changes as well as transitions for the image. The images are set to fill the height of the resume text so you will see them spaced differently depending on your window size. They'll also spread out if your screen is wide enough If you click on the top square of the unfolded cube on my homepage, the production box appears which representative is of a paperboard carton dieline. This is an SVG, which means it's scalable as it 'draws' using code, but it also means I can dynamically change the content, as I did for the dimensions to scale depending on your window width. <br><br>Messages will appear on the right size to help guide your experience for the dimensions change.
If you click on any image or video within my project pages, the lightbox will appear bringing that piece of media into focus, showing a custom caption for each slide and allowing you to click the arrow buttons or the thumbnails at the bottom to view other images within that specific project. <br><br> Clicking anywhere in the background or the X button will close the lightbox. For my homepage, I took headshots in outfits to match each of the colour schemes. You may have noticed that my smile gets bigger when you hover over it, but did you know double-clicking shows a third sillier image? This is a screenshot from my About Me page, where clicking on any image will also open the lightbox. Hovering on any image will add an effect to the image and its associated text section, and vice versa. I also revamped my menu which now slides in from the left side.

Dorotea.ca Today

2024

After leaving my last full-time job, I dove into re-building my personal website so that it would more accurately capture my current skill level and enhance the experience overall with even more colour themes and special features such as the responsive production box on my home page or deeper details when clicking on a project image or hovering around my resume page. No templates or builders, just raw code for everything you see.

HTML - JavaScript - CSS - AfterEffects

A screenshot of the original home page which included a more basic animation but desktop users did experience the bigger smile too when hovering over my head shot. You can experience it with the link in paragraph four.<br> <br> Sorry, due to how this lightbox caption appears, I don't know how to add that here yet
The old menu was a drop-down from the hamburger, sometimes it would glitch and not show or close when requested to. The old 'About Me' page repurposed the 'Big Smile on Hover' headshot image along with two static images. No hover effects within the text. The old project pages were a lot simpler, using a single column for the whole layout We can see we can keep the heart and re-iterate it, the headers are pretty similar and I did have colour themes. Everything else is just better now, maximally as me as I can be. <br> <br> The buttons in the 'My Projects' page were rough - shifting around on any hover. Some pages were so short and I didn't want to lose a viewer getting bored before they clicked on the good stuff, so I combined '3D Printing' with 'Artwork' and 'Prototyping Research' with 'Research'.

Version 1 of Dorotea.ca

2020

After being introduced to web development during my German exchange, I decided to push my skills by building a personal website to share my projects and experience with the world. I was committed to not use any website builder such as DreamWeaver or Wix, meaning I had to write the code from scratch for every aspect. Full of undesired effects from my unpolished code (we're all beginners when we start), an update was sorely needed to properly represent myself.


On the heels of completing my first website, I volunteered to design the website for Launch 2.0 of local press-on-nail business, SnailNail. The store was hosted by Shopify and I used HTML, CSS and Liquid to create the website with additional visual elements created in Adobe Illustrator. The website and graphics used were designed to be easy to maintain, alter and update as the business grows.

For the storefront I implemented a product customizer where consumers can easily create their own nail designs with variable pricing. This product was already offered but at a low flat rate I found was unjust with the varying complexities of requests, inspiring me to apply learnings from my summer course to make real-world profit. The nail style choices would influence the final price for the product which ensured fair compensation for the artist. Consumers could upload reference photos and comments with their order. This customizer directly increased income by 50%.

Within the first hour of the website relaunch, SnailNail generated as much revenue as it used to in a month. Doubling within 24hrs. Currently the founder has moved on from the business, unlisting the site and focusing on another sort of customised artificial body extensions, orthotics! From baby helmets, to wrist-hand orthosis and tatted prosthesis, she can do it all & I'm so proud to have supported a part of her journey.


The home page for snailnail.ca after my update. It's a common theme in the websites I made for others to make it easy to update after my involvement is over. We built the brand visuals to use simple vector graphics and stayed within Shopify's visual builder, with some custom HTML elements for which I provided good documentation on their functions. This was the page for Custom Nails, and my main goal with supporting this entrepreneur. Starting at $15 and increasing based on your selection. Swatches for all the polish colours available - but she can mix custom too! I also added the option to upload photos as before buyers had to message their inspiration photo via social media if they had one, now it's easier to track with the order.
One of the sick photos from a happy customer :) This was my sketchbook page which outlines all the store front's pages and their layouts, as well as sketches of the illustrations found across the store. Such pretty stars - another photo found on the website and social media from a happy customer :)

Custom Site, Custom Nails, Custom Pricing

2021

During my german exchange, we built a website with a product customiser. A few months later when I was making an order to support a friends business, I noticed that no matter how you wanted your custom nails they would be the same price. Seeing as this was unfair to the artist when buyers would request intricate designs, I reached out to volunteer my skills and build a customizer for fair pricing as well as an entire web update. Built in Shopify's platform with HTML, CSS and their native language of Liquid, with all vector graphics made by me in Illustrator, this renovation dramatically increased profits and made the whole experience more pleasant.


I was asked by a friend, who was also a member of this play, if I had time to help an up-and-coming production company with a poster and website in time to market their next show. On the tails of finishing my thesis, I didn't have energy to build a website but they reassured me that they wanted something really simple, something they could easily maintain and adjust. The founder had no prior web experience so I opted to use WordPress, a free & beginner friendly platform with a long history, making for an endless amount of tutorials available online. The result is accessible here.

The first website I fully developed was for a final project during my exchange semester at Hochschule der Medien. Intended to showcase our foundational understanding of coding websites, and also making the captivating animated banners & other digital ads which were a final project in a sister-course. CannaBliss is a fictional senior-targeted pharmaceutical brand. The site was created using HTML, CSS, JavaScript and jQuery. You can check out that project here. This is where I first created a product customizer with variable pricing which inspired me to work with the owner of SnailNail & put it to business!


A page from my sketchbook outlines the new website plan and page layouts A screenshot of the Elementor for WordPress interface with the home page of the website, building something that was easy to learn how to change was a priority. The poster I created for their upcoming production using Adobe Illustrator. The 'Ugly Stick' in the spotlight is a musical instrument fashioned out of household and tool shed items from Newfoundland (Canadian province). As this production was strongly influenced by Newfoundland folklore, it felt appropriate for the folk instrument to be fashioned out of items from the characters' homes or costumes.

Riveting Productions

2021

Using what little spare time I had in my senior year, I volunteered to help a friend's production company by designing their play poster and building their website. Since they wanted to be able to continuously update their website, I decided to build it using elementor in WordPress as it is known to be beginner friendly with a visual builder and extensive tutorials available online.

The homepage for this project. I chose to use a trusting and calm blue along with beige to build a senior pharmaceutical vibe, using a simple pun on cannabis for the brand name to enthuse how beneficial the effects may be. Marketing is all about selling the experience, not the product after all. One of the pages on the website is for a short quiz to help customers find their ideal product The customizer was the main feature of the website. Toggling between the product form and strain options would change the image to the customized product, and combined with the product quantity the price would be adjusted to reflect the selection. It wasn't until SnailNail that I was able to get a customized product into a cart.

CannaBliss Website & Product Customiser

2020

Being tasked with creating a website with a product customizer as a final project within my Advertising minor, I decided to create a cannabis brand (how blissfully Canadian of me) targeted towards seniors with a calming but still high contrast interface thats easy to navigate. This was my introduction to website development and DreamWeaver, we used JavaScript and jQuery to make the customizer work, changing the graphics and price dependant on your options. Vector graphics were designed in Illustrator and product renders made with Dimension.

Still horizontal banner ad with a senior couple dancing on the beach Animated horizontal banner ad with a senior couple running and laughing
Animated vertical banner with a senior couple walking on the beach, looking like they're in the middle of sharing a funny story Small rectangle still ad featuring a senior face many youths may recognize as Harold, having a good time playing golf Still vertical banner ad featuring a senior woman having a joyous time connecting with nature Animated small rectangle ad with a senior couple on some cheery travel, ready to take on the world

Digital Banner Ads

2020

Since the course that introduced me to coding was within the Advertising minor, of course we also had to generate some advertisements. These were all made using public domain stock images, with additional elements made in Photoshop along with the animations, pulling them together to help catch your attention.